<template>
  <el-menu
    :default-active="activeIndex"
    :mode="menuMode"
    :background-color="menuStyle.backGroundColor"
    :text-color="menuStyle.textColor"
    :active-text-color="menuStyle.activeColor"
    :router="true"
    @select="handleSelect"
  >
    <template v-for="item in menus" :key="item.path">
      <el-menu-item :index="item.path" v-if="!item.children">{{ item.label }}</el-menu-item>
      <SubMenuItem v-else :menu="item" />
    </template>
  </el-menu>
</template>
<script lang="ts" setup>
  import { ref, toRefs, PropType } from 'vue';
  import { useRoute } from 'vue-router';
  import { MenuItem } from '@/menus/index';
  import SubMenuItem from './SubMenuItem.vue';

  interface menuStyleProps {
    backGroundColor: string;
    textColor: string;
    activeColor: string;
  }

  const route = useRoute().path;
  const activeIndex = ref(route);

  const handleSelect = (key: string) => {
    activeIndex.value = key;
  };

  const props = defineProps({
    menuMode: {
      type: String,
      default: 'vertical',
    },
    menuStyle: {
      type: Object as PropType<menuStyleProps>,
      default: (): menuStyleProps => ({ backGroundColor: '#333', textColor: '#fff', activeColor: '#ffd04b' }),
    },
    menus: {
      type: Array as PropType<MenuItem[]>,
      default: () => [],
    },
  });

  const { menuMode, menuStyle, menus } = toRefs(props);
</script>

<style lang="scss" scoped>
  .el-menu {
    border-right: none;
  }
</style>
